
class Home1 {

    // 获取所有的学生标签li
    public stus = document.querySelectorAll('li') as NodeListOf<HTMLLIElement>
    // 获取秒数显示的dom
    public countDownDom = document.querySelector('.countdown') as HTMLDivElement
    // 获取开始按钮的dom
    public startBtn = document.querySelector('.btn-start') as HTMLButtonElement
    // 获取结束按钮的dom
    public endBtn = document.querySelector('.btn-end') as HTMLButtonElement
    // 定义settimeout唯一值
    public setTimeOutId: NodeJS.Timeout | undefined
    // 定义setIntervalt唯一值
    public setIntervalId: NodeJS.Timeout | undefined
    public initSNum = 10
    // 定义显示倒计时的秒数
    public sNum = this.initSNum

    constructor() { this.countDownDom.innerText = String(this.sNum) }

    //时间倒计时
    countDown() {
        this.setIntervalId = setInterval(() => {
            console.log(this.sNum);
            // 把倒计时的秒数显示到页面上
            this.countDownDom.innerText = String(this.sNum)
            this.sNum--
            // 判断是否小于等于0 清除定时任务
            if (this.sNum <= 0) {
                this.initClear()
            }

        }, 1000);
    }


    // 清除定时任务 并初始化
    initClear() {
        clearInterval(this.setIntervalId)
        clearTimeout(this.setTimeOutId)

        // 初始化
        this.setTimeOutId
        // 定义setIntervalt唯一值
        this.setIntervalId
        // 定义显示倒计时的秒数
        this.sNum = this.initSNum
        this.countDownDom.innerText = String(this.sNum)

    }



    // 清除 所有学生的 active 类名效果
    clearStuActiveAll() {
        this.stus.forEach(stu => {
            stu.classList.remove('active')
        });
    }

    // 随记抽取学生添加选中效果
    setRandomStuAddActive() {

        this.clearStuActiveAll()
        // 随记获取一名学生对应的索引值
        let rand = Math.floor(Math.random() * this.stus.length)  // 0.234  ~ 20.234234 => 向下取整  0~20
        this.stus[rand].classList.add('active')

        this.setTimeOutId = setTimeout(() => this.setRandomStuAddActive(), 100);
    }

    init() {
        // document.addEventListener('事件',执行函数)
        // 给开始按钮加上 点击事件
        this.startBtn.addEventListener('click', () => {
            this.countDown()
            this.setRandomStuAddActive()
        })
        // 给结束按钮加上 点击事件
        this.endBtn.addEventListener('click', () => {
            this.initClear()
        })
    }


}


export default Home1
